<template>
  <div class="app-container">
    <span style="font-size: medium;color: rgba(151,170,195) "> / 采购调拨 / 调拨计划 / 调拨详情</span>

    <el-row style="margin-top: 20px">
      <el-col :span="24" class="card-box">
        <el-card>
          <template #header><CollectionTag style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">基本信息</span></template>
          <el-descriptions
              :column="3"
              :size="'large'"
              border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <tickets />
                  </el-icon>
                  订单编号
                </div>
              </template>
              {{ allocationPlan.orderNo}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <collection />
                  </el-icon>
                  调拨编号
                </div>
              </template>
              {{ allocationPlan.allocationNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <timer />
                  </el-icon>
                  创建时间
                </div>
              </template>
              {{ allocationPlan.createdTime }}
            </el-descriptions-item>
            <el-descriptions-item span="1">
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <flag />
                  </el-icon>
                  运送仓库
                </div>
              </template>
              {{allocationPlan.warehouseNo}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <timer />
                  </el-icon>
                  调拨时间
                </div>
              </template>
              {{parseTime(allocationPlan.allocationDate, '{y}-{m}-{d}')}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <timer />
                  </el-icon>
                  最后编辑时间
                </div>
              </template>
              {{allocationPlan.modifiedDate}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <location />
                  </el-icon>
                  发货地址
                </div>
              </template>
              {{allocationPlan.origin}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <coin />
                  </el-icon>
                  计划状态
                </div>
              </template>
              <el-tag :type="allocationPlan.state === '待生成运输订单' ? 'danger' : 'warning'" size="large">{{ allocationPlan.state === 0 ? '待生成运输订单' : '已分配运输订单' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <data-board />
                  </el-icon>
                  预期到货时间
                </div>
              </template>
              {{parseTime(allocationPlan.expectedDeliveryTime, '{y}-{m}-{d}')}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <data-board />
                  </el-icon>
                  备注
                </div>
              </template>
              {{allocationPlan.remarks}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <template #header><Connection style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">调拨信息</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-table v-loading="loading" :data="allocationDetails">
              <el-table-column label="采购调拨明细编号" align="center" prop="allocationDetailNo"/>
              <el-table-column label="货品批号" align="center" prop="rawProductBatch"/>
              <el-table-column label="货品名称" align="center" prop="rawProductName"/>
              <el-table-column label="调拨重量(吨)" align="center" prop="weight"/>
              <el-table-column label="配送状态" align="center" prop="status">
                <template #default="scope">
                  <el-tag :type="scope.row.status === '未送达' ? 'primary' : 'success'" size="large">{{ scope.row.status}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="调拨件数(可空)" fixed="right" align="center" prop="transportQuantity"/>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import {getAllocationPlan} from "@/api/purchase/AllocationPlan.js";
import {parseTime} from "@/utils/ruoyi.js";
import {
  CollectionTag,
  Connection,
  DataBoard,
  Flag,
  Location,
  Tickets,
  Timer
} from "@element-plus/icons-vue";
import {getAllocationDetail} from "@/api/purchase/AllocationDetail.js";

const {proxy} = getCurrentInstance();
const route = useRoute();

const allocationNo = ref('');
const allocationPlan = ref({});
const allocationDetails = ref([]);
const loading = ref(false);
const open = ref(false);

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap['large'] || marginMap.default,
  }
})

function initial(){
  if(route.params) {
    allocationNo.value = route.params.allocationNo;
    getAllocationPlan(allocationNo.value).then(response => {
      allocationPlan.value = response.data;
    })
    loading.value = true;
    getAllocationDetail(allocationNo.value).then(response => {
      allocationDetails.value = response.data;
      loading.value = false;
    })
  }
}

initial();
</script>

<style scoped lang="scss">
.cell-item {
  display: flex;
  align-items: center;
}
</style>